<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性 vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					  【文本和图片垂直居中(对齐)效果】
					  对齐分为四种：基线对齐，顶部对齐
					               居中对齐，底部对齐
					元素种类：块元素，行元素
					块元素特点:独占一行，设置宽高
					行元素特点：一行内显示，不可设置宽高
					网页：元素之间嵌套生成
					行元素与块元素可以任意嵌套
					前提：设置宽高---行套块
					             ---块套块√
								 ---块套行√
					前提：一行内显示---行套块 √
					              ---块套块×
								  ---块套行√
								  ---行套行√
		 -->
		 <style>
			
			 img.baseline{
				 vertical-align: baseline;
			 }
			 img.top{
				 vertical-align: top;
			 }
			 img.middle{
				 vertical-align: middle;
			 }
			 img.bottom{
				 vertical-align: bottom;
			 }
		 </style>
	</head>
	<body>
	<!-- 需求结构：4个p，嵌套文字：图片叫什么名字
	                    文字后加img，设定宽高：25~100px
						每个图片后面加：基线对齐，
						居中对齐，底部对齐
	 -->
	 <h1>文本与图片垂直属性</h1>
	 <p>蜡笔小新<img	class="baseline"src="img/1.png" alt="1" width="100px" height="100px">基线对齐</p>
	<p>蜡笔小新<img	class="top"src="img/2.png" alt="1" width="100px" height="100px">顶部对齐</p>
	<p>蜡笔小新<img	class="middle"src="img/3.png" alt="1" width="100px" height="100px">居中对齐</p>
	<p>比卡丘<img	class="bottom"src="img/4.png" alt="1" width="100px" height="100px">底部对齐</p>
	<!-- css选择器--抓第一张照片--
	 思路：派生选择器：找后代+伪类选择器：添加效果
	 p img:nth-child(1)
	 -->
	</body>
</html>